<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="">
<meta name="robots" content="all,follow">

    <title>Bootstrap Admin Template </title>
    <link rel="shortcut icon" href="${ctx}/static/img/favicon.ico">
    
    <!-- global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="${ctx}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/static/css/font-icon-style.css">
    <link rel="stylesheet" href="${ctx}/static/css/style.default.css" id="theme-stylesheet">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="css/form.css">
    <style>
    	.row{
    		margin-left: 0;
    		margin-right: 0;
    	}
    </style>
</head>

<body>
    
<!--====================================================
                     MAIN NAVBAR
======================================================-->
<jsp:include page="../header.jsp" />
<!--====================================================
                    PAGE CONTENT
======================================================-->
    <div class="page-content d-flex align-items-stretch">
       
        <!--***** SIDE NAVBAR *****-->
        <jsp:include page="../left.jsp" />
		<jsp:include page="../alertMsg.jsp" />
		
        <div class="content-inner form-cont">
            <div class="row">
                <div class="col-md-12">

                    <!--***** BASIC FORM *****-->
                    <div class="card form" id="form1">
                        <div class="card-header">
                            <h3>书籍类型添加</h3>
                        </div>
                        <br>
                        <form id="myForm" action="${ctx}/typeBook/saveOrUpdate" >
                            <div class="card form container">
                            	<div class="row">
		                            <div class="col-md-6">
		                                <div class="form-group row">
		                                    <label for="example-text-input" style="width: 85px;" class=" col-form-label">书籍类型名</label>
		                                    
		                                    
		                                    <div class="col-9">
		                                        <input class="form-control" type="text" name="typeName" id="typeName" onblur="checkName()" />
		                                    </div>
		                                </div>
		                                <div class="form-group row">
		                                    <label for="example-text-input" style="width: 85px;" class=" col-form-label" maxlength="255">描述</label>
		                                    <div class="col-9">
		                                        <textarea class="form-control" cols="80" rows="3" name="describes"  id="describes"></textarea>
		                                        <!--   name="describes"  type="textarea"--> 
		                                    </div>
		                                </div>
		                                
		                            </div>
		                        </div>
                            </div>
                            <div style="text-align:center;margin-bottom: 20px;">
                            	<button type="button" onclick="checkData()" class="btn btn-general btn-blue mr-2">Submit</button>  
                            	<button type="reset" class="btn btn-general btn-white">Cancel</button>
                            </div>
                        
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Global Javascript -->    
    <script src="${ctx}/static/js/jquery.min.js"></script>
    <script src="${ctx}/static/js/popper/popper.min.js"></script>
    <script src="${ctx}/static/js/bootstrap.min.js"></script>
    <script src="${ctx}/static/js/front.js"></script>
    <!--Core Javascript -->
    <script type="text/javascript">
       function checkData(){
    	   var falg = true;
    	   if($("#typeName").val() == '' || $("#typeName").val() == null){
    		   alertMsg("书籍类型名不能为空！", "warning");
    		   falg = false;
    		   return false;
    	   }
    	   
    	   if($("#describes").val() == '' || $("#describes").val() == null){
    		   alertMsg("描述不能为空！", "warning");
    		   falg = false;
    		   return false;
    	   }
    	   
    	   if($("#typeName").val() != ''){
    		   var bookName = $("#typeName").val();    	   
    		   $.ajax({
    			   
    		    async:false,
    			url:'${ctx}/typeBook/checkName/'+bookName,
    			  success: function(res){
    				//  alert(res == 'false');
    				  if(res == 'false'){
    					  falg = false;
    					  alertMsg("该名称已存在,请重新填写","warning"); //warning
    					  return false;
    				  }
    			  },
    			  error: function(err){
    				  alert('err')
    			  }
    		   })
    	   }
    	   if(falg){
    		   $("form").submit();
    	   }
    	   
    	   
       }
       function checkName(){
    	   if($("#typeName").val() != ''){
    		   var bookName = $("#typeName").val();    	   
    		   $.ajax({
    			   
    		    async:false,
    			url:'${ctx}/typeBook/checkName/'+bookName,
    			  success: function(res){
    				//  alert(res == 'false');
    				  if(res == 'false'){
    					
    					  alertMsg("该名称已存在,请重新填写","warning"); //warning
    					  return false;
    				  }
    			  },
    			  error: function(err){
    				  alert('err')
    			  }
    		   })
    	   }
       }
    </script>
</body>

</html>